<template>
  <div class="search">
    <!-- 搜索头部框 -->
    <div class="search-header">
      <div class="search-wrapper" @click="showHotSearch">
        <div class="search-content">
          <van-icon name="search" />
          <span>{{shade.query}}</span>
        </div>
      </div>
    </div>

    <div class="list-wrapper">
      <!-- 左侧一级分类菜单栏 -->
      <scroll class="category-scroll" ref="menuScroll">
        <div class="category-left">
          <van-badge-group :active-key="currentIndex">
            <div v-for="item in searchCategories" ref="menuList">
              <van-badge :title="item.opt_name" @click="onClick" />
            </div>
          </van-badge-group>
        </div>
      </scroll>
      <!-- 右侧二级分类 -->
      <scroll class="detail-scroll" ref="detailScroll" :probeType="3" :listenScroll="true" @scroll="scroll" :data="searchCategories">
        <div class="detail-right van-hairline--top">
          <div class="detail-item" v-for="item in searchCategories" ref="detail">
            <van-cell :title="item.opt_name" is-link value="查看更多" :border="false" @click="tocatgoods(item)" />
            <ul class="category-list">
              <li class="category-item" v-for="child in item.children" @click="tocatgoods(child)">
                <div class="item-image">
                  <img :src="child.image_url">
                </div>
                <div class="item-name">
                  <span>{{child.opt_name}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </scroll>
    </div>
    <!-- 热门搜索页面 -->
    <hot-search v-show="showHot" @onCancel="onCancel"></hot-search>
  </div>
</template>

<script>
import axios from "axios";
import scroll from "../../common/scroll";
import hotSearch from "./children/hotSearch";
import { searchCategories, searchHotquery } from "../../api/getDatas";
export default {
  components: {
    scroll,
    hotSearch
  },
  data() {
    return {
      searchCategories: null,
      scrollY: -1,
      currentIndex: 0,
      rightLiTops: [],
      showHot: false,
      shade: {},
      items: []
    };
  },

  methods: {
    showHotSearch() {
      this.showHot = true;
    },
    onCancel() {
      this.showHot = false;
    },
    tocatgoods(item) {
      const type = item.children ? 1 : 2;
      this.$router.push({
        path: "/catgoods",
        query: {
          opt_id: item.opt_id,
          opt_type: type,
          opt_name: item.opt_name
        }
      });
    },
    // 点击左边分类菜单,右侧滚动到相应位置
    onClick(key) {
      if (this.currentIndex === key) {
        return;
      }
      this.currentIndex = key;
      this.$refs.detailScroll.scrollToElement(this.$refs.detail[key]);
    },

    // 得到滚动的y值
    scroll(pos) {
      this.scrollY = pos.y;
    },

    // 计算高度 得到右侧每个分类高度
    _calculateHeight() {
      let listHeight = [];
      const list = this.$refs.detail;
      let height = 0;
      let top = 0;
      listHeight.push(height);

      Array.prototype.slice.call(list).forEach(li => {
        top += li.clientHeight;
        listHeight.push(top);
      });
      this.rightLiTops = listHeight;
    },

    // 左右滚动联调
    _initLeftScroll(index) {
      this.$refs.menuScroll.scrollToElement(
        this.$refs.menuList[index],
        500,
        0,
        -200
      );
    },
    // 初始化数据
    initData() {
      searchCategories().then(res => {
        this.searchCategories = res.data.data;
      });
      searchHotquery().then(res => {
        this.items = res.data.items;
        this.shade = res.data.shade;
      });
    }
  },
  created() {
    this.initData();
  },

  watch: {
    // 确保dom渲染后计算高度
    searchCategories() {
      setTimeout(() => {
        this._calculateHeight();
      }, 20);
    },

    // 监听右侧滚动y值,左右滚动联调
    scrollY(newY) {
      for (let i = 0; i < this.rightLiTops.length - 1; i++) {
        let height1 = this.rightLiTops[i];
        let height2 = this.rightLiTops[i + 1];
        if (-newY >= height1 && -newY < height2) {
          this._initLeftScroll(i);
          this.currentIndex = i;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  .search-header {
    background-color: white;
    width: 100%;
    position: relative;
    .search-wrapper {
      text-align: center;
      padding: 0.11rem 0.16rem;
      .search-content {
        border-radius: 0.08rem;
        background-color: #ededed;
        height: 0.42rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.16rem;
        color: #9c9c9c;
        span {
          margin-left: 0.1rem;
        }
      }
    }
  }
  .list-wrapper {
    display: flex;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 50px;
    background-color: #f1f2f6;
    .category-scroll {
      height: 100%;
      overflow: hidden;
    }

    .detail-scroll {
      height: 100%;
      overflow: hidden;
      flex: 1;
    }

    .detail-right {
      .detail-item {
        .category-list {
          background-color: white;
          display: flex;
          flex-wrap: wrap;
          .category-item {
            width: 0.95rem;
            height: 0.75rem;
            margin-bottom: 0.16rem;
            .item-name {
              width: 100%;
              text-align: center;
              height: 0.17rem;
              line-height: 0.18rem;
              font-size: 0.12rem;
              color: #666;
              margin-top: 0.06rem;
            }
            .item-image {
              height: 0.53rem;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            img {
              width: 0.56rem;
              height: 0.56rem;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
.van-badge--select::after {
  border: 0;
}
.van-badge:not(:last-child)::after {
  border: 0;
}
</style>
